<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>{{ obj }}</div>

    <button @click="back">回退</button>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'About',
  setup () {
    // 全局路由对象
    const router = useRouter()

    // 当前路由对象
    const route = useRoute()
    // query传递过来的参数都会变成字符串类型
    console.log(route.query)
    // params传递过来的参数刷新后就没了
    console.log(route.params)
    const back = () => {
      router.back()
    }

    const obj = ref({})
    // 组件挂载过程之中执行，在setup之后
    // 发请求，数据初始化，接受路由参数
    onMounted(() => {
      console.log('onMounted')
      if (route.params.obj != null) {
        obj.value = JSON.parse(route.params.obj)
      }
    })
    // 组件卸载式执行，执行清除定时器，清除闭包等操作
    onUnmounted(() => {
      console.log('onUnmounted')
    })

    return {
      back,
      route,
      obj
    }
  }
})
</script>
